<script setup name="home">
import {ref,reactive,onMounted} from "vue"
import { ElMessage, timeUnits } from "element-plus";
import timeFormatter from "@/utils/timeFormatter";
import OAMain from "@/components/OAMain.vue";
import homeHttp from "@/api/homeHttp.js"
import * as echarts from 'echarts'

let informs = ref([])
let absents = ref([])

// 部门员工数量生命周期
onMounted(async () =>{
    try{
        // 异步请求数据
        informs.value = await homeHttp.getLatestInforms()
        absents.value = await homeHttp.getLatestAbsents()
        let rows = await homeHttp.getDepartmentStaffCount()
        console.log(rows)
        let xdatas = []
        let ydatas = []
        for (let row of rows){
            xdatas.push(row.name)
            ydatas.push(row.staff_count)
        }

        // 初始化实例
        var myChart = echarts.init(document.getElementById('department-staff-count'))
        // 使用 echats 绘制图表
        myChart.setOption({
            tooltip:{},
            xAxis:{
                data:xdatas
            },
            yAxis:{},
            series:[
                {
                    name:'员工数量',
                    type:'bar',
                    data:ydatas
                }
            ]
        });
    }catch(detail){
        ElMessage.error(detail)

    }
})

</script>

<template>
    <OAMain title="首页">
        <el-card>
            <template #header>
                <h2>部门员工数量</h2>
            </template>
            <div id="department-staff-count" style="width: 100%; height: 350px;"></div>
        </el-card>

        <el-row :gutter="20">
        <el-col :span="12">
            <el-card>
                <template #header>
                    <h2>最新通知</h2>
                </template>
                <el-table :data="informs">
                    <el-table-column label="标题">
                        <template #default="scope">
                            <router-link :to="{name:'inform_detail',params:{pk:scope.row.id}}">{{ scope.row.title }}</router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布者" prop="author.realname"></el-table-column>
                    <el-table-column label="发布时间">
                        <template #default="scope">{{ timeFormatter.stringFromDate(scope.row.create_time) }}</template>
                    </el-table-column>
                    <el-table-column label="是否已读">
                        <template #default="scope">
                            <el-tag v-if="scope.row.reads.length > 0">已读</el-tag>
                            <el-tag v-else type="danger">未读</el-tag>
                        </template>
                    </el-table-column> 
                </el-table>
            </el-card> 
        </el-col>
        <el-col :span="12">
            <el-card>
                <template #header><h2>最新请假</h2></template>
                <el-table :data="absents">
                    <el-table-column label="部门" prop="requester.department.name"></el-table-column>
                    <el-table-column label="发起人" prop="requester.realname"></el-table-column>
                    <el-table-column label="起始日期">
                        <template #default="scope">{{ timeFormatter.stringFromDate(scope.row.start_date) }}</template>
                    </el-table-column>
                    <el-table-column label="结束日期" >
                        <template #default="scope">{{ timeFormatter.stringFromDate(scope.row.end_date) }}</template>
                    </el-table-column>
                    <el-table-column label="发起时间">
                        <template #default="scope">
                            {{ timeFormatter.stringFromDate(scope.row.create_time) }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    </OAMain>
</template>

<style scoped>
</style>